International Journal of Electrical and Computer Engineering (IJECE) 
Vol. 9, No. 1, February 2019, pp. 445~451 
ISSN: 2088-8708, DOI: 10.11591/ijece.v911 .pp445-451 o 445 


Augmented reality application for chemical bonding 
based on android 


Alexander Setiawan, Silvia Rostianingsih, Timotius Reinaldo Widodo 
Informatics Department, Petra Christian University Surabaya, Indonesia 


Article Info ABSTRACT 

Article history: Augmented Reality can provide information that can be more easily 
f understood by the user. Because of its advantages, Augmented Reality can be 

Received Mar 13, 2018 utilized to create learning applications that can support teaching and learning 

Revised Jul 18, 2018 process. Chemical learning about chemical reactions is usually boring by 

Accepted Aug 5, 2018 students. This is because students only know the theory of the book and the 


explanation of teachers only. This research utilized Augmented Reality to be 


able to see 3D model of each chemical element and also can see animation of 
Keywords: merging between elements. In order to bring up 3D objects of chemical 
elements then made a card that will be used as a marker / tracker. In addition, 


Android ; there can be a combination of several chemical elements based on several 
Augmented reality cards detected from the camera. The test is performed for chemical elements 
Chemical element with periodic table such as H, Ca, Na, K, C, Cl, Br, O, S, SO2, CO2, OH. 
Marker Testing the application by performing several merge elements such as HCI, 


NaCl, H20, CO2, MgS, SO2, O2, CaC12, HCN, N2, and others. The results 
of this study will be tested on several students to see the benefits of 
student learning. 


Copyright © 2019 Institute of Advanced Engineering and Science. 
All rights reserved. 


Corresponding Author: 


Alexander Setiawan, 

Informatic Engineering Department, 

Petra Christian University, 

Siwalankerto 121-131 Surabaya, East Java 60236, Indonesia. 
Email: alexander@petra.ac.id 


1. INTRODUCTION 

One interesting technology that can be developed in mobile applications is Augmented Reality. 
Augmented Reality is a technology that combines two-dimensional or three-dimensional virtual objects into a 
real three-dimensional environment then projecting these virtual objects in real time. Augmented Reality has 
a lot of benefits that can be applied in various fields, including health, manufacturing and reparations, 
entertainment, military, and education. Augmented Reality can provide a picture or information that can be 
more easily understood by the user. Because of its advantages, Augmented Reality can be utilized to create 
learning applications that can support teaching and learning process. 

Chemical learning about chemical reactions is usually boring by students. This is because students 
only know the theory of the book and the explanation of teachers only. By making applications that utilize 
Augmented Reality, students are expected to be more interested and enthusiastic to learn chemical reactions. 
The use of Augmented Reality in learning has been tested on several school materials such as chemistry, 
mathematics [1, 2]. It was also tested on several college materials such as informatics and architecture [3, 4]. 
The study concluded that Augmented Reality helps student learning more effectively and students also 
positively argue with the application. In addition, several other studies also use this application Augmented 
Reality to be able to see 3D models of each chemical element and also can see animation merging between 
elements. 
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2. RELATED RESEARCH 
2.1. Augmented reality 

Augmented Reality (AR) is a variation of the Virtual Environment (VE) or commonly known as 
Virtual Reality [5]. Augmented reality can be defined as able to deal with the new information immediately 
direct or indirect therefore influence the physical real-world environment has been enhanced/augmented were 
by adding virtual computer-generated information to it [6, 7]. Also, the AR is defined by Azuma in 1997 [8]. 
He indicates that the AR is not only restricted to the technical hardware whereas it brings the real and virtual 
items together in a real environment. In addition, it records the real and virtual objects together and then runs 
jointly in real time in three dimensions [9]. 


2.2. Augmented reality component 

Some of the components required in the manufacture and development of Augmented Reality 
applications are follows hardware, software, marker [10]. The marker is physical objects or places where 
virtual and real environments merge. It is identified as a place to bring up digital information. The use of 
markers in Augmented reality aplications depends on the libraries used in their development. The examples 
of marker can be seen on Figure 1. 


Figure 1. The example of marker 
Source: http://www.bitrebels.com/wp-content/uploads/2010/0 1/armarker.png 


2.3. Android 

Android provides an open platform for developers to create their own applications. Initially 
developed by Android Inc. For its development, formed the Open Handset Alliance (OHA), a consortium of 
34 hardware companies, software companies, and telecommunications, including Google, HTC, Intel, 
Motorola, Qualcomm, T-Mobile, and NVIDIA. [11]. The open nature of Android that has made a large 
number of communities have sprung up application developers to use Android as the basis for the project of 
making applications, by adding new features for Android on the devices officially released by using another 
operating system. [12]. Android is a software stack for mobile devices that includes an operating system, 
middleware and key applications. The Android SDK provides the tools and APIs necessary to begin 
developing applications on the Android platform using the Java programming language [13]. 


2.4. AJAX 
AJAX is a technique to make the display more quickly and dynamically. AJAX allows the display 
can perform updates by exchanging small amounts of data. This will increase interactivity, speed, and 
usability [14]. 
AJAX is a combination of: 
a. DOM accessed with a client-side scripting language to dynamically display and interact with 
information displayed 
b. Objects from Microsoft XMLHTTP or XMLHttpRequest more commonly implemented in some 
browsers. This object is useful as a vehicle exchange of data asynchronously with the web server. In 
some frameworks AJAX, HTML IFrame element preferred over XMLHTTP or XMLHttpRequest to 
exchange data with the web server. Webserver is a provider of a web service through HTTP or HTTPS 


Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 446 - 451 


Int J Elec & Comp Eng ISSN: 2088-8708 o 447 


protocol. Webserver system will be accessible through Location Based Service. Webserver to be used is 
already integrated with Apache PHP components [15] 

c. XML is commonly used as a transfer document, although other formats are also possible, such as 
HTML, plain text. XML is recommended in the use of AJAX techniques for handling ease of access by 
using DOM 

d. JSON can be an alternative choice as a transfer document, given JSON is JavaScript itself making 
handling easier 


3. ANALYSIS AND RESULTS 

3.1. Analysis of Needs 

a. Make Android based mobile application that can be easily accessed by the user so as to facilitate the 
recognition process through the application of chemical bonding 

b. In this application the necessary features to provide marker and image so that the user can learn and 
remember more about the learning through information given and practical for use on mobile learning 
applications [16] 


3.2. Resut 

This process begins with the AR camera being dislodged. The AR camera then detects the marker 
used. Once the marker is detected, the app matches the marker with an existing dataset. When it matches the 
existing dataset then on the mobile screen will appear 3D objects above the marker. 3D object show process 
can be seen in Figure 2. 


Show 3D 
Object 


Vuforia AR 
Camera On 


Marker 
Detected 


In Dataset 


Show 3D Object 
According Marker 


Figure 2. Flowchart show 3D object 


The marker used in the “Chemical Bonding Application” is in the form of a hexagon card made 
simple but still interesting. Card design of marker used in this application can be seen in Figure 3. Card or 
marker designs are made different even though they contain one element in common because if the marker is 
made the same, the marker will detect one type even though the card is different and only bring up a 
3D object. 
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Figure 3. The design of marker 


Android device testing is done by using Android 2 devices, among others, Sony Xperia M2 and 
Lenovo A7-30. Specifications devices can be seen in Table 1. 


Table 1. Table Specifications 


Device Operating System Display Size CPU Memory Camera Size 
; i 4.8" (960 x 540 pixels & 1.2 GHz Qualcomm 
pony pena M22 -oADdod Al 16,777,216-colour TFT) MSM8926 Quad Core | OB RAM SME 
Lenovo A7-30 : 7.0" (600 x 1024 pixels & 
A3300 Android 4.2.2 16M colour TFT) 1.3 GHz Quad Core 1 GB RAM 2 MP 


The test is done by directing the mobile camera on the marker and then measured at what distance 
the marker can be recognized and can bring up the 3D object. Page view 3D object that can be selected by the 
user through the superbly specified point coordinates can be seen in Figure 4 and Figure 5. Figure 4 shows 
the test results against the precision of 3D objects that appear using Sony Xperia M2 device. From the test 
can be obtained results that the 3D Object that appears has been in accordance with the marker. 

The Figure 5 shows the test results against the precision of 3D objects that appear using Lenovo A7- 
30 device. From the test can be obtained results that the 3D Object that appears has been in accordance with 
the marker. 

Testing the next stage is done to see if 3D Object can react with another 3D Object if the marker has 
entered a predetermined distance. The test is divided namely, conformity information presented for each 
element, testing of 4 3D objects that have a reaction. This test is performed to see the movement of four 3D 
Objects that have a reaction. This test is done by directing the camera on four different markers and having 
reactions to each other. 

The Figure 6 is a test of 4 Object 3D that has a reaction using Sony Xperia M2 device. From the test 
results obtained that the 3D Object can react by moving and join the other 3D Object according to the 
relationship of the reaction. The testing of 4 Object 3D that has a reaction using Lenovo A7-30 devices. From 
the test results obtained that the 3D Object can react by moving and join the other 3D Object according to the 
relationship of the reaction can be seen Figure 7. 
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Figure 6. Testing the four object 3D with Sony Xperia M2 device 
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4. 


Figure 7. Testing the four Object 3D with lenovo A7-30 device 


CONCLUSION 
At the end of the design and development of application program for the chemical bonding 


application, some conclusions can be drawn through the test. 


a. 


The Markers are made different from each other because one marker image can only be detected as a 
target. So to bring up more than one of the same elements requires markers with different shapes or 
images. 

The marker detection by the mobile camera is running well, the marker is recognizable so as to bring up 
the corresponding 3D objects. Marker H raises the 3D element element H. 

The chemical bonding application can generate annotations for each element. Description of the element 
name, atomic number, mass number, oxidation number and the shape of the element. 

Applications can run a 3D object pooling of elements that have a bond to form a compound. 
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